<template>
  <el-main>
    <el-form label-width="50px" label-suffix=":" label-position="left">
      <el-form-item label="颜色">
        <el-color-picker v-model="configStore.config.color" />
      </el-form-item>
      <el-form-item label="明暗">
        <el-switch v-model="configStore.config.isDark" :active-value="false" :inactive-value="true" active-text="亮色" inactive-text="暗色" />
      </el-form-item>
      <el-form-item label="是否展示日期" label-width="100px">
        <el-switch v-model="configStore.config.isShowDate" :active-value="true" :inactive-value="false" />
      </el-form-item>
      <el-form-item label="默认计时时间" label-width="100px">
        <el-input-number class="input-number" v-model="configStore.config.hour" placeholder="小时" :min="0" :max="99" @change=""
          controls-position="right" />
        <span class="separator">:</span>
        <el-input-number class="input-number" v-model="configStore.config.minutes" placeholder="分钟" :min="0" :max="59" @change=""
          controls-position="right" />
        <span class="separator">:</span>
        <el-input-number class="input-number" v-model="configStore.config.seconds" placeholder="秒" :min="0" :max="59" @change=""
          controls-position="right" />
      </el-form-item>
      <el-form-item label="开启自动启动" label-width="120px">
        <el-switch v-model="configStore.config.autoOpen" />
      </el-form-item>
    </el-form>
  </el-main>
</template>

<script setup lang="ts">
import { useConfigStore } from '@renderer/stores/configStore';
import { debounce } from '@renderer/utils/debounceUtils'

const configStore = useConfigStore()

// 订阅配置存储的变化
configStore.$subscribe(
  // 回调函数，当配置存储发生变化时执行
  (_mutation, state) => {
    // 调用防抖函数，传入当前配置存储的状态
    debounceFunc({ ...state.config })
  },
  {
    // 设置为true，表示订阅是独立的，不会影响组件的生命周期
    detached: true
  }
)

// 创建一个防抖函数，延迟执行传入的函数，这里延迟时间为300毫秒
const debounceFunc = debounce((config) => {
  // 调用窗口API的设置同步配置存储事件，并传入配置对象
  window.api.settingSyncTimeConfigStoreEvent(config)
}, 300)

</script>

<style lang="scss" scoped>
.input-number {
  width: 80px;
}

.separator {
  margin: 0 5px;
}
</style>
